<!--
 @Description 咨询样式一
 @author chenTeng
 @date 2022/11/2
-->

<template>
  <div :style="{ 'margin-top': top,'padding': `0 ${spacing}`}" class="notice-bar-two">
    <van-notice-bar
      mode="link"
      :left-icon="ctType"
      background="#fff"
      :scrollable="false"
    >
      <van-swipe
        vertical
        class="notice-swipe-two"
        :autoplay="delayTime"
        :show-indicators="false"
      >
        <van-swipe-item
          v-for="item in list"
          :key="item.id"
          @click="toDetail(item)"
        >{{ item.mainTitle }}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
  </div>
</template>
<script>
import ctType from '../../images/base/labas.png'
import mixins from './../mixins'
import noticeBarMixins from '@/components/CustomPage/apps/widget/noticeBar/mixins'
export default {
  name: 'NoticeBarTwo',
  mixins: [mixins, noticeBarMixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ctType: ctType,
      list: [],
      defaultList: [
        {
          mainTitle: '*********************',
          id: '1'
        },
        {
          mainTitle: '*********************',
          id: '2'
        }
      ]
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.list = result.dataList.data.rows
    }
  }
}
</script>

<style lang='scss' >
@import "@/styles/utility/rem.scss";
.notice-bar-two {
  width: rem(750);
  .van-notice-bar {
    width: 100%;
    border-radius: rem(16);
    padding-left: 0;
    padding-right: rem(20);
  }
  .van-notice-bar__right-icon {
    @include font-color($mainColor);
  }
  .van-notice-bar__left-icon {
     width: rem(100);
      height: rem(80);
            @include bg-color($mainColor);
      border-radius: rem(16) 0 0  rem(16);
      overflow: hidden;
  }
  .van-notice-bar__wrap {
    padding-left: rem(20);
  }
   .van-icon__image{
    text-align: center;
    margin: 0 auto;
    margin-top: rem(22);
  }
  .notice-swipe-two {
    height: 40px;
    line-height: 40px;
    .van-swipe-item {
      display: block;
      color: #000;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
